<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
		<title>注册</title>
	</head>
	<body style="background-image: url(/image/background.png);background-size: 100%;">
		<div id="box">
			<el-form :model="user" :rules="rules">
				<el-form-item label="昵称" prop="nickname">
					<el-input style="width: 17vw;" v-model="user.nickname"></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="username">
					<el-input style="width: 17vw;" v-model="user.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input style="width: 17vw;" v-model="user.password" show-password></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input style="width: 17vw;" v-model="user.phone"></el-input>
				</el-form-item>
				<el-form-item>
					<el-upload :multipe="false" :show-file-list="true" :auto-upload="false" :file-list="fileList"
						:before-upload="beforeUpload" :on-change="handleChange" action="uploadAction"
						list-type="picture" accept="image/jpg,image/jpeg,image/png">
						<h5>点击选择头像</h5>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" style="margin-left: 3vw;">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="register()">确 定</el-button>
			</span>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				fileList: [],
				user: {
					nickname: "",
					username: "",
					password: "",
					phone: ""
				},
				rules: {
					nickname: [{
						required: true,
						message: '请输入您的昵称',
						trigger: 'blur'
					}, {
						min: 1,
						max: 12,
						message: '长度不可超过12',
						trigger: 'blur'
					}, {
						pattern: '^[\u4E00-\u9FA5A-Za-z0-9_]+$',
						message: '存在非法字符'
					}],
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						pattern: '^[A-Za-z0-9]{4,40}$',
						message: '只能以数字结合字母的形式'
					}],
					phone: [{
						required: true,
						message: '请输入您本人的手机号码',
						trigger: 'blur'
					}, {
						min: 11,
						max: 11,
						message: '手机号格式不正确',
						trigger: 'blur'
					}, {
						pattern: '^[0-9]*$',
						message: '存在非法字符'
					}]
				}
			},
			methods: {
				beforeUpload(file) {
					//console.log("beforeUpload="+file)

				},
				handleChange(file, fileList) {
					this.fileList = fileList
				},
				cancel() {
					window.location.href = "/";
				},
				register() {
					let _this = this
					let files = this.fileList
					let formdata = new FormData()
					for (key in this.user) {
						formdata.append(key, this.user[key])
					}
					if (files.length > 0 && files[0].raw != null) { // 有文件上传
						formdata.append("img", files[0].raw)
					}
					axios({
						url: "/api/public/user/add",
						method: "post",
						headers: {
							'Content-Type': 'multipart/form-data;charset=UTF-8'
						},
						data: formdata
					}).then(function(response) {
						if(response.data.code == 200){
							_this.$message({
								message:'注册成功',
								showClose:'true',
								type:'success'
							})
							window.location.href = "/api/public/user/go2Login"
						}
					})
				}
			},
			mounted() {

			}
		})
	</script>
	<style>
		#box {
			margin-top: 15vw;
			margin-left: 35vw;
		}
	</style>
</html>
